<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display 属性</title>

        <style>

            ul {
                background-color:#1479d7;

                padding: 10px 0;
            }

            a {
                text-decoration: none;
            }

            .list-item {
                /* 行内元素属性 */
                display: inline;
                /* color: #ffffffff; */

                margin: 0 10px;
            }

            .list-item a {
                color: #ffffffff;
            }

            .list-item:hover a{
                color:#1479d7;
                background-color:#ffffffff;
            }

            .link-block {
                display: block;
            }
        </style>
    </head>
    <body>
        <!--
            行内元素 input img a span b
                display:  inline;
            块状元素 div table form ul ol li
                display: block;
        -->

        <ul>
            <li  class="list-item">
                <a href="https://www.baidu.com">列表项1</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项2</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项3</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项4</a>
            </li>
        </ul>

        <a class="link-block" href="https://www.baidu.com">列表项1</a>
        <a class="link-block" href="https:///www.baidu.com">列表项2</a>
    </body>
</html>